<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test01</title>
    <script src="https://unpkg.com/vue/dist/vue.js" type="text/javascript"></script>
    <style>
        .class01 {
            color: red;
            font-size: 28px;
        }

        .class02 {
            background-color: yellow;
        }
    </style>
</head>
<body>

<div id="app">
    <div class="class01">Green Template 01</div>
    <div class="class01 class02">Green Template 02</div>
    <div :class="'class01'">Green Template 03</div>
    <div :class="clazz01">Green Template 04</div>
    <div :class="['class01','class02']">Green Template 05</div>
    <div :class="[clazz01,clazz02]">Green Template 06</div>
    <div :class="{'class01':true}">Green Template 07</div>
    <div :class="{'class01':true,'class02':true}">Green Template 08</div>
    <div :class="{clazz01:true,clazz02:true}">Green Template 09</div>
    <div :class="{class01:isClazz01,class02:isClazz02}">Green Template 10</div>
    <div :class="clazzObj">Green Template 11</div>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            clazz01: 'class01',
            clazz02: 'class02',
            isClazz01: true,
            isClazz02: true,
            clazzObj: {
                class01: true,
                class02: true,
            }
        }
    });

</script>

</body>
</html>